<template>
  <div class="row-form position-relative">
    <div class="short-no">{{ shortNo }}</div>
    <ClForm ref="refAddRowForm" class="add-form-item" label-width="120px" :form-item="formItem" :disabled="disabled" />
    <div v-if="!disabled && showAddBtn" class="position-absolute top-7 right-20 cl-icon-btn" @click="handleAdd">
      <SvgIcon icon-class="add" />
    </div>
    <div v-if="!disabled" class="position-absolute top-7 right-10 cl-icon-btn" @click="handleDelete">
      <SvgIcon icon-class="delete" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ADD_SCORE_POINT_FORM_ITEM } from '../data'

const formItem = ref(cloneDeep(ADD_SCORE_POINT_FORM_ITEM))
const emit = defineEmits(['delete', 'add'])
const props = defineProps<{
  showAddBtn: boolean
  initialValue: any
  disabled: boolean
  itemIdEnum: any[]
  shortNo: number
}>()
const refAddRowForm = ref<any>(null)
const { getFlowOrderEnum, getEnumValue } = useEnumeration()

onMounted(() => {
  initForm()
})

const initForm = async () => {
  const flowOrderEnum = await getFlowOrderEnum()
  formItem.value.forEach((item) => {
    item.value = props.initialValue[item.key]
    if (item.key === 'flowOrderCode') {
      item.elementConfig.options = flowOrderEnum
    }
    if (item.key === 'orderNo') {
      item.value = props.initialValue['orderNo'] && Number(props.initialValue['orderNo'])
    }
    if (item.key === 'itemId') {
      item.elementConfig.options = props.itemIdEnum
    }
  })
}
const handleDelete = () => {
  emit('delete')
}
const handleAdd = () => {
  emit('add')
}
defineExpose({
  refAddRowForm
})
</script>

<style lang="scss" scoped>
.add-form-item {
  margin-left: 40px;
  width: calc(100% - 40px) !important;
}
.row-form {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  padding-top: 20px;
}
.short-no {
  position: absolute;
  left: 10px;
  top: 0;
  padding-left: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 82px;
}
</style>
